<template>
  <!-- 个人资料 -->
  <div class="user-container">
    <!-- 导航栏 -->
    <van-nav-bar left-text="个人中心" left-arrow @click-left="$router.back()" />

    <form ref="userForm">
      <!-- 头像 -->
      <van-cell class="tx" title="头像：">
        <!-- 使用 title 插槽来自定义标题 -->
        <van-image
          class="photo"
          fit="cover"
          round
          :src="userInfo.avatar"
          @click="$refs.file.click()"
        >
        </van-image>
      </van-cell>
      <!-- 头像的选择文件 -->
      <input type="file" hidden ref="file" />
      <!-- / 头像 -->

      <!-- 姓名 -->
      <van-cell
        title="姓名："
        is-link
        @click="isPersonalNameShow = true"
        v-model="userInfo.nickname"
      ></van-cell>
      <!-- / 姓名 -->

      <!-- 性别 -->
      <van-cell
        title="性别："
        is-link
        :value="userInfo.sex === 0 ? '女' : '男'"
        @click="isPersonalGenderShow = true"
      ></van-cell>
      <!-- / 性别 -->

      <!-- 手机号码 -->
      <van-field
        class="text-right"
        type="tel"
        label="手机号"
        v-model="userInfo.mobile"
        placeholder="请输入手机号码"
      />
      <!-- / 手机号码 -->

      <!-- 服务地区 -->
      <!-- 已被注册成全局组件 在components < selectArea < index -->
      <!-- 可直接引用 -->
      <van-cell
        title="服务地区："
        is-link
        @click="isPersonalAreaShow = true"
        v-model="userInfo.area"
      ></van-cell>
      <!-- / 服务地区 -->

      <!-- 详细地址 -->
      <van-field
        type="textarea"
        class="text-right"
        label="详细地址"
        placeholder="请输入详细地址"
        v-model="userInfo.address"
      />
      <!-- / 详细地址 -->
    </form>

    <!-- 底部的按钮 -->
    <van-button class="button" type="button" @click="btnOK">保存数据</van-button>

    <!-- 定义弹出层组件 -->
    <!-- 姓名 -->
    <van-popup
      v-model="isPersonalNameShow"
      style="height: 100%"
      position="bottom"
    >
      <personal-name
        v-if="isPersonalNameShow && userInfo.id"
        @close="isPersonalNameShow = false"
        :userId="userInfo.id"
        v-model="userInfo.nickname"
      />
    </van-popup>
    <!-- 性别弹出层 -->
    <van-popup
      v-model="isPersonalGenderShow"
      style="height: 50%"
      position="bottom"
    >
      <personal-gender
        v-if="isPersonalGenderShow"
        @close="isPersonalGenderShow = false"
        v-model="userInfo.sex"
        :userId="userInfo.id"
      />
    </van-popup>

    <!-- 地区 -->
    <select-area
      :showSelectArea="isPersonalAreaShow"
      @confirm="onConfirm"
      @close="isPersonalAreaShow = false"
    />
  </div>
</template>

<script>
import PersonalName from './components/personal-name' // 引入姓名的弹出层
import PersonalGender from './components/personal-gender' // 引入性别的弹出层
import { getUserInfo, updateUserInfo } from '@/api/user'

export default {
  name: 'User',
  components: {
    PersonalName,
    PersonalGender
  },
  data () {
    return {
      isPersonalNameShow: false, // 姓名
      isPersonalGenderShow: false, // 性别
      isPersonalPhoneShow: false, // 手机号
      isPersonalAreaShow: false, // 地区
      userInfo: {}, // 个人信息
      tel: '' // 绑定手机号码
    }
  },
  created () {
    if (this.$store.state.user) {
      this.loadUserInfo()
    } else {
      this.$router.push('/login')
    }
  },
  mounted () {},
  methods: {
    async loadUserInfo () {
      this.userInfo = await getUserInfo()
      this.userInfo.nickname = this.userInfo.nickname || this.userInfo.username
    },
    onConfirm (value) {
      this.userInfo.area = value.map(item => item.name).join('-')
      this.isPersonalAreaShow = false
    },
    async btnOK () {
      try {
        // 保存提示
        this.$toast.loading({
          message: '保存中...',
          forbidClick: true
        })
        await updateUserInfo({ ...this.$store.state.user, ...this.userInfo })
        this.loadUserInfo()
        // 提示成功
        this.$toast.success('保存成功')
      } catch (err) {
        this.$toast.fail('保存失败，请稍后重试')
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less">
.user-container {
  padding-bottom: 88px;
  .van-popup {
    background-color: #f5f7f9;
  }
  .van-nav-bar {
    background-color: #3f51b5;

    /deep/ .van-nav-bar__left {
      .van-nav-bar__text,
      .van-icon-arrow-left {
        color: #fff;
        font-size: 35px;
      }
    }
  }

  /deep/ .van-field__control {
    color: #969799;
  }

  .text-right {
    /deep/ .van-field__control {
      text-align: right;
      padding-right: 40px;
    }
  }

  .tx {
    height: 130px;
    .van-cell__title {
      line-height: 85px;
    }
    .photo {
      width: 80px;
      height: 80px;
    }
  }

  .phone {
    margin-left: 20px;
  }

  .button {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
    width: 100%;
    color: #fff;
    height: 100px;
    font-size: 33px;
    background-color: #3f51b5;
  }
}
</style>
